<template>
	<view class="drugInfo-wrap">
		<view class="index-bg"></view>

		<view class="drugInfo-swiper">
			<uni-swiper-dot class="drugInfo-swiper-dot" :info="bannerImgList" :current="bannerImgCurrent" field="content" mode="default">
				<swiper class="swiper-box" autoplay="true">
					<swiper-item v-for="(banner_item, index) in bannerImgList" :key="index">
						<image mode="aspectFit" class="drugInfo-bannerImg" :src="banner_item"></image>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<view class="drugInfo-swiper-price">
				<view class="txt7">¥&nbsp;136.00</view>
				<view class="txt8">¥230.00</view>
			</view>
			<view class="drugInfo-swiper-name">{{ goodsInfo.name }}&nbsp;1.2g*60片(3效同补)</view>
			<view class="drugInfo-swiper-address">厂商：三九药业集团股份有限公司</view>
		</view>

		<view class="drugInfo-explana">
			<u-title value="药品说明"></u-title>
			<view class="drugInfo-explana-table">
				<view class="drugInfo-explana-tip">请仔细阅读该药品的的作用说明书，并在药师指导下购买和使用。</view>

				<view class="drugInfo-explana-item">
					<text class="drugInfo-explana-txt">【药品名称】</text>
					<text class="drugInfo-explana-paragraph" v-if="goodsInfo.name">{{ goodsInfo.name }}</text>
				</view>

				<view class="drugInfo-explana-item">
					<text class="drugInfo-explana-txt">【成份】</text>
					<text class="drugInfo-explana-paragraph" v-if="westernDrugVO.ingredient">{{ westernDrugVO.ingredient }}</text>
				</view>

				<view class="drugInfo-explana-item">
					<text class="drugInfo-explana-txt">【性状】</text>
					<text class="drugInfo-explana-paragraph" v-if="westernDrugVO.characterText">{{ westernDrugVO.characterText }}</text>
				</view>
				<view class="drugInfo-explana-item">
					<text class="drugInfo-explana-txt">【药理毒性】</text>
					<text class="drugInfo-explana-paragraph" v-if="westernDrugVO.pharmacology">{{ westernDrugVO.pharmacology }}</text>
				</view>

				<view class="drugInfo-explana-item">
					<text class="drugInfo-explana-txt">【规格】</text>
					<text class="drugInfo-explana-paragraph" v-if="westernDrugVO.specification">{{ westernDrugVO.specification }}</text>
				</view>
				<view class="drugInfo-explana-item">
					<text class="drugInfo-explana-txt">【用法用量】</text>
					<text class="drugInfo-explana-paragraph" v-if="westernDrugVO.usageText">{{ westernDrugVO.usageText }}</text>
				</view>
				<view class="drugInfo-explana-item">
					<text class="drugInfo-explana-txt">【不良反应】</text>
					<text class="drugInfo-explana-paragraph" v-if="westernDrugVO.untoward">{{ westernDrugVO.untoward }}</text>
				</view>
				<view class="drugInfo-explana-item">
					<text class="drugInfo-explana-txt">【禁忌】</text>
					<text class="drugInfo-explana-paragraph" v-if="westernDrugVO.taboo">{{ westernDrugVO.taboo }}</text>
				</view>
				<view class="drugInfo-explana-item">
					<text class="drugInfo-explana-txt">【注意事项】</text>
					<text class="drugInfo-explana-paragraph" v-if="westernDrugVO.matters">{{ westernDrugVO.matters }}</text>
				</view>
				<view class="drugInfo-explana-item">
					<text class="drugInfo-explana-txt">【药物相互作用】</text>
					<text class="drugInfo-explana-paragraph" v-if="westernDrugVO.interaction">{{ westernDrugVO.interaction }}</text>
				</view>

				<view class="drugInfo-explana-item">
					<text class="drugInfo-explana-txt">【贮藏】</text>
					<text class="drugInfo-explana-paragraph" v-if="westernDrugVO.store">{{ westernDrugVO.store }}</text>
				</view>

				<view class="drugInfo-explana-item">
					<text class="drugInfo-explana-txt">【批准文号】</text>
					<text class="drugInfo-explana-paragraph" v-if="westernDrugVO.approvalNumber">{{ westernDrugVO.approvalNumber }}</text>
				</view>
				<view class="drugInfo-explana-item">
					<text class="drugInfo-explana-txt">【生产企业】</text>
					<text class="drugInfo-explana-paragraph" v-if="westernDrugVO.manufacturer">{{ westernDrugVO.manufacturer }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import uTitle from '@/components/u-title/u-title.vue';
export default {
	components: {
		uTitle
	},
	data() {
		return {
			goodsId: null,
			goodsInfo: {},
			bannerImgCurrent: 0
		};
	},
	computed: {
		bannerImgList() {
			return this.goodsInfo.imagesUrl ? this.goodsInfo.imagesUrl.split(',') : [];
		},
		westernDrugVO() {
			return this.goodsInfo.westernDrugVO;
		}
	},
	onLoad(option) {
		this.goodsId = option.id;
		this.queryCommodityById();
	},
	onShow() {},
	methods: {
		//商品详情
		queryCommodityById() {
			this.$api
				.queryCommodityById({
					params: {
						id: this.goodsId
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.goodsInfo = res.result;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		}
	}
};
</script>

<style lang="less">
@import './drugInfo.less';
</style>
